<template>
  <div>
    <div class="bg-red flex j-between p-10 p-b-100">
      <!-- 占位 -->
      <p></p>
      <router-link to="/user/setting" class="p-10">
        <van-icon class="fs-rem-20px text-white" name="setting-o" />
      </router-link>
    </div>
    <!-- 主体内容需要在这个标签下面写 -->
    <div class="m-t-50 relative z-index-0 o-hidden">
      <svg-icon name="yuan" class="text-white user-bg" />
      <div class="text-center">
        <img
          class="d-inline-block w-60 h-60 b-round fs-rem-12px text-white"
          :src="user.userInfo.photo"
          alt="头像"
        />
        <p class="fs-rem-14px p-v-10 text-content">{{user.userInfo.petName}}</p>
        <van-tag
          color="#FF7577"
          round
          size="large"
          class="p-h-10"
        >VIP有效期：{{user.userInfo.expiryDate}}</van-tag>
        <van-skeleton :row="2" :loading="!ready" class="m-t-20">
          <div v-if="count" class="w-full p-10 m-t-10 flex j-around text-center">
            <div>
              <p class="fs-rem-14px text-content">{{count.xfe}}</p>
              <p class="fs-rem-12px text-grey p-t-5">历史消费</p>
            </div>
            <div>
              <p class="fs-rem-14px text-content">{{count.yhe}}</p>
              <p class="fs-rem-12px text-grey p-t-5">实际优惠</p>
            </div>
            <div>
              <p class="fs-rem-14px text-content">{{count.yhj}}</p>
              <p class="fs-rem-12px text-grey p-t-5">有效优惠券</p>
            </div>
          </div>
        </van-skeleton>
      </div>
      <div class="m-t-20 b-t-15 p-h-15 text-content fs-rem-14px">
        <router-link to="/user/record" class="p-10 b-b flex j-between a-center">
          <span>投保记录</span>
          <van-icon name="arrow"></van-icon>
        </router-link>
        <router-link to="/user/order" class="p-10 b-b flex j-between a-center">
          <span>我的订单</span>
          <van-icon name="arrow"></van-icon>
        </router-link>
        <router-link to="/user/state" class="p-10 b-b flex j-between a-center">
          <span>统计报表</span>
          <van-icon name="arrow"></van-icon>
        </router-link>
        <router-link to="/user/suggest" class="p-10 b-b flex j-between a-center">
          <span>意见和建议</span>
          <van-icon name="arrow"></van-icon>
        </router-link>
      </div>
      <div class="text-center fs-rem-14px text-red m-v-20">
        <span @click="handleLogout()">退出账号</span>
      </div>
    </div>
  </div>
</template>

<script>
import logo from '@/assets/images/merchant.jpg'
import { mapState, mapMutations } from 'vuex'
import { removeItem } from '@/utils/storage'
export default {
  data () {
    return {
      ready: false,
      logo,
      userInfo: null,
      count: null
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    ...mapMutations(['changeLoginStatus', 'changeUser']),
    async init () {
      this.getCount()
    },
    async getCount () {
      let { xfe, yhe, yhj } = await this.$api.post('/xf/user/count', {})
      this.count = { xfe, yhe, yhj }
      this.ready = true
    },
    async handleLogout () {
      this.changeLoginStatus(false)
      await removeItem('userInfo')
      this.$api.$axios.defaults.headers.common['token'] = ''
      this.$router.push('/')
    }
  },
  computed: {
    ...mapState(['user'])
  }
}
</script>

<style lang="scss" scoped>
.user-bg {
  /deep/ svg {
    width: 3000px;
    height: 3000px;
    position: absolute;
    left: 50%;
    top: 30px;
    border-radius: 50%;
    transform: translate(-50%, 0);
    z-index: -1;
  }
}
.m-t-50 {
  margin-top: -50px;
}
.b-t-15 {
  border-top: 15px solid #f9f9f9;
}
</style>
